/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>


		<view class="container">
			<!--头部  -->
			<view class="type-navbar">
				<block v-for="(item,index) in categories" :key="index">
					<view class="type-box">
						<view :data-id="item.id" class="type-navbar-item " :class="[activeCategoryId==item.id?'type-item-on':'']" @tap="tabClick">
							{{item.name}}
						</view>
					</view>
				</block>

			</view>
			<!-- 商品信息 -->
			<view class="goods-detail">
				<!-- 商品 -->
				<view class="goods-info" :hidden="activeCategoryId ==0?false:true">
					<swiper class="swiper_box" :indicator-dots="true" :vertical="false" :autoplay="true" :interval="3000" :duration="1000">
						<block v-if="goods_img.length!=0">
							<swiper-item v-for="(item,index) in goods_img" >
								<image class="wh100" v-if="goods_img" :src="item.image_url" />
							</swiper-item>
						</block>
						<block  v-if="goods_img.length==0">
							<swiper-item>
								<image class="wh100"  :src="goods_info.original_img.indexOf('public')==1?hostUrl+goods_info.original_img:goods_info.original_img" />
							</swiper-item>
						</block>
					</swiper>
					<view class="goods-title pd-bg-fff">
						<view class="goods-name ellipsis-2">{{goods_info.goods_name}}</view>
						<view class='share-btn' @tap.stop='catchShare'>
							<image src='common/icon-share.png'></image>
							<view>分享</view>
						</view>
					</view>
					<!-- 团购 -->
					<view class="goods-price pd-bg-fff" v-if="prom_type==2">
						<view class="price co-red">
							<text>
								团购价
							</text>
							<view>
								<text class="mon">
									￥
								</text>
								{{filter(goods_info.shop_price)}}
							</view>
						</view>
						<view class="prom-info">
							<text class="prom-type">
								限时团购
							</text>
							<text>
								{{countdown}}
							</text>
						</view>
						<view class="market-price">
							市场价
							<view class="line">￥{{goods_info.market_price}}</view>
						</view>
						<view>{{goods_info.sales_sum}}人已参团</view>
					</view>
					<!-- 秒杀价 -->
					<view class="goods-price pd-bg-fff" v-if="prom_type==1">
						<view class="price co-red">
							<text>
								抢购价
							</text>
							<view>
								<text class="mon">
									￥
								</text>
								{{filter(goods_info.shop_price)}}
							</view>
						</view>
						<view class="prom-info">
							<text class="prom-type">
								限时抢购
							</text>
							<!-- <text>
								367天4时33分22秒
							</text> -->
						</view>
						<view class="market-price">市场价<view class='line'>￥{{goods_info.market_price}}</view>
							<view class="goods-num">
								<view class="sales">销量：{{goods_info.show_sale_sum}}</view>
								<view class="stock">库存：{{goods_info.store_count}}</view>
							</view>
						</view>
						<!-- <view>{{goods_info.sales_sum}}人已参团</view> -->
					</view>
					<view class="goods-price pd-bg-fff" v-if="prom_type!=2&&prom_type!=1">
						<view class="price co-red" v-if="goods_info.exchange_integral==0">
							<block v-if="!pricePlan.length>0">
								<text class='mon'>￥</text>
								
								{{price[0]}}
								<text class="mon">.{{price[1]}}</text>
							</block>
							<block v-if="pricePlan.length>0">
							<text class='mon'>￥</text>
								<block v-if="minPrice!=maxPrice">
									{{filter(minPrice)}}-{{filter(maxPrice)}}
								</block>
								
								<block v-if="minPrice==maxPrice">
									{{filter(minPrice)}}
								</block>
							</block>
						</view>
						<!-- 积分 -->
						<view class="price co-red" v-else>
							<text></text>
							<text class="mon" style="font-size:11px;">￥</text>
							<text style="font-size:22px;">{{price[0]}}</text>
							<text class="mon" style="font-size:11px;">.{{price[1]}}</text>
							<text style="font-size:17px;">+ {{exchange_integral}}积分</text>
						</view>
						<!-- 拼团 -->                                                    
						<navigator v-if="goods_info.prom_type==6" class="prom-info" :url="'../../team/team_info/team_info?goods_id='+options.goods_id+'&prom_id='+goods_info.prom_id"
						 role="navigation">
							<text class="prom-type">
								该商品正在参与拼团
							</text>
							<view style="display:inline-block;">点击前往</view>
						</navigator>
						<view class="market-price">市场价<view class='line'>￥{{goods_info.market_price}}</view>
							<view class="goods-num">
								<view class="sales">销量：{{goods_info.show_sale_sum}}</view>
								<view class="stock">库存：{{goods_info.store_count}}</view>
							</view>
						</view>
					</view>
					<view @tap="getCardList" class="logistics-list pd-bg-fff coupons" v-if="coupon.length>0">
						<view class="logistics-item">
							<view class="item-title">优惠券</view>
							<view class="promotion-item-mes-card">
								<view>
									<block v-for="(item,index) in coupon" :key="index">
										<text class="promotion-item-mes-cardborder">
											满{{item.condition}}减{{item.money}}
										</text>
									</block>
								</view>


							</view>
							<view class="item-img">
								<image class="wh100" :src="imgUrl+'common/icon-arrowdown.png'" role="img"></image>
							</view>
						</view>
					</view>
					<view class="logistics-list pd-bg-fff activity" v-if="promOrder.length>0">
						<view class="hd_item">
							<view class="item-title">活动</view>
							<view class="containter">
								<block v-for="(item,index) in promOrder">
									<view class="event">
										<view class="man">
											<text class="text">
												{{item.title}}
											</text>
											<text class="item_content">
												<!-- 订单满100元打50折 -->
												{{item.type_desc}}
											</text>
										</view>
									</view>
								</block>

							</view>
						</view>
					</view>
					<view class="logistics-list pd-bg-fff specifications">
						<view @tap="openSpecModel" class="logistics-item">
							<view class="item-title">规格</view>
							<view class="item-mes fw600">
								<block  v-if="!itemId">
									{{goodsInputNum}}件
								</block> 
								<block  v-if="itemId">
									<text>{{select.keyName}}</text><text>;{{goodsInputNum}}件</text>
								</block>
								
							</view>
							<view class="item-img">
								<image class="wh100" :src="imgUrl+'common/icon-arrowdown.png'" role="img"></image>
							</view>
						</view>
					</view>
					<view class="logistics-list pd-bg-fff address">
						<view @tap="enterAddress" class="logistics-item">
							<view class="item-title ellipsis-1">地址</view>
							<view class="item-mes">
								<image class="loc" :src="imgUrl+'common/loc.png'" role="img"></image>
								
								<block v-if="addressList">
									{{addressList.province_name}} {{addressList.city_name}} {{addressList.district_name}}
								</block>
								<block v-if="!addressList">
									请选择收货人
								</block>
							</view>
							<view class="item-img">
								<image class="wh100" :src="imgUrl+'common/icon-arrowdown.png'" role="img"></image>
							</view>
						</view>
						<view class="logistics-item">
							<view class="item-title">运费</view>
							<view class="item-mes" style="width:300px;">{{shipping}}</view>
						</view>
						<view class="logistics-item">
							<view class="item-title">服务</view>
							<view class="item-mes ellipsis-1" style="width:302px;">由{{storeInfo.store_name}}提供服务</view>
						</view>
					</view>
					<view class="user-comment logistics-item pd-bg-fff">
						<view class="evaluation">
							用户评价
							<text>
								({{commentData.total_sum}})
							</text>
						</view>
						<view @tap="tabComment" class="good-comment">
							好评
							<view class="co-red">{{commentData.high_rate}}%</view>
							<view class="item-img">
								<image class="wh100" :src="imgUrl+'common/icon-arrowdown.png'" role="img"></image>
							</view>
						</view>
					</view>
					<block v-if="allComments.length>0" v-for="(item,index) in allComments" :key="index">
						<view class="estimate" v-if="index<4">
							<image class="user_img" :src="item.is_anonymous===1?defaultImg:item.head_pic" role="img"></image>
							<view class="user">
								<view class="id">
									<view class="star_on">
										<text>

											{{item.is_anonymous===1 ? '匿名用户' : item.nickname ||item.nickname?'':'匿名用户'}}
										</text>

										<image :src="imgUrl+'common/stars-on.png'" v-for="item in item.goods_rank" role="img"></image>
										<image :src="imgUrl+'common/stars-off.png'" v-for="item in 5 - item.goods_rank" role="img"></image>
										<!-- <block v-for="5-item.goods_rank">
											<image :src="imgUrl+'common/stars-off.png'" role="img"></image>
										</block> -->


										<text class="time">
											{{item.add_time_format}}
										</text>
									</view>
								</view>
								<text class="estimate_content">
									{{item.content}}
								</text>
								<view class="img-ul" v-if="item.commentsImg!='' ||item.commentsImg">
									<block v-for="(item1,pic) in item.commentsImg" :key="pic">
										<view class="img-li">
											<!-- <image mode='aspectFill' ></image> -->
												<image @tap="previewCommentImgs" class="wh100" :data-cidx="item.comment_id" :data-index="pic" role="img" :src="hostUrl+item1"></image>
										</view>
									</block>
								</view>

							</view>
						</view>
					</block>

					<view class="shops-mes" v-if="storeInfo">
						<view class="shops-info">
							<view class="shops-pic">
								<image class="wh100" :src="hostUrl+storeInfo.store_logo" role="img"></image>
							</view>
							<view class="shops-name">
								<view class="ellipsis-1">{{storeInfo.store_name}}</view>
								<view class="store-desc ellipsis-1">
									<text>
										关注人数:{{storeInfo.store_collect}}
									</text>
									<text>
										商品数量:{{storeInfo.goods_count}}
									</text>
								</view>
							</view>
							<navigator class="baguette" :url="'/pages/store/index/index?store_id='+storeId" role="navigation">
								
								<view>进店逛逛</view>
							</navigator>
						</view>
						<view class="scores-list">
							<view class="scores-item">
								<view class="scores-title">
									商品评价
									<view class="co-red">
										{{storeInfo.store_desccredit}}
										<text>
											{{storeInfo.store_desccredit_desc}}
										</text>
									</view>
								</view>
							</view>
							<view class="scores-item">
								<view class="scores-title">
									服务评价
									<view class="co-red">
										{{storeInfo.store_servicecredit}}
										<text>
											{{storeInfo.store_servicecredit_desc}}
										</text>
									</view>
								</view>
							</view>
							<view class="scores-item">
								<view class="scores-title">
									物流评价
									<view class="co-red">
										{{storeInfo.store_deliverycredit}}
										<text>{{storeInfo.store_deliverycredit_desc}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="recommend">
						<view class="recommend-title">为你推荐</view>
						<view class="recommend-ul">
							<block v-for="(item,index) in storeRecommend" :key="index">

								<navigator class="li" open-type="redirect" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+ item.goods_id"
								 role="navigation">
									<view class="li-img">
										<image class="wh100" :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType"
										 role="img"></image>
									</view>
									<view class="li-title ellipsis-2">{{item.goods_name}}</view>
									<view class="color">
										<text>
											￥
										</text>

										{{recommendRrice[index][0]}}
										<text>
											.{{recommendRrice[index][1]}}
										</text>
									</view>
								</navigator>
							</block>
						</view>
					</view>
				</view>
				<!-- 详情 -->
				<view class="goods-norms" :hidden="activeCategoryId !=2?false:true">
					<view class="type-navbar2">
						<view class="type-box2">
							<view @tap="tabClick2" data-id="0" :class="[activeNormsId==0?'type-item2-on':'']"> 商品详情 </view>
						</view>
						<view class="type-box2">
							<view @tap="tabClick2" data-id="1" :class="[activeNormsId==1?'type-item2-on':'']"> 规格参数 </view>
						</view>
					</view>
					<view class="wxparse" :hidden="activeNormsId==0?false:true">

						<rich-text :nodes="goods_content"> </rich-text>
					</view>
					<view class="parameter" :hidden="activeNormsId==1?false:true">
						<view class="table">
							<view class="th-thitle tb">主体</view>

							<block v-for="(item,index) in goodsAttr" :key="index">
								<view class="td-cont tb">
									<view class="td-title">{{item.goods_attribute.attr_name}}</view>
									<view class="td-text">{{item.attr_value}}</view>
								</view>
							</block>

						</view>
					</view>
				</view>
				<!-- 评论 -->
				<view class="goods-comment" :hidden="activeCategoryId ==2?false:true">
					<view class="type-navbar3">
						<block v-for="(item,index) in categories3">
							<view class="type-box3">
								<view @tap="tabClick3" :class="[commentsType==item.id?'type-item3-on':'']" :data-id="item.id">{{item.name}}({{item.num}})
								</view>
							</view>
						</block>
					</view>
					<view class="comment-list">
						<block v-for="(item,index) in allComments" :key="index">
							<view class="comment-item">
								<view class="comment-title">
									<view class="user-name">
										<view class="user-pic">
											<image class="wh100" :src="item.is_anonymous===1?defaultImg:item.head_pic" role="img"></image>
										</view>
										{{item.is_anonymous===1 ? '匿名用户' : item.nickname ||item.nickname?item.nickname:'匿名用户'}}
									</view>
									<view>{{item.add_time_format}}</view>
								</view>
								<view class="comment-cont">
									<view>
										<view class="stars">
											<view class="stars-checked">

												<image class="star" v-for="item in item.goods_rank" :src="imgUrl+'common/star-red.png'" role="img"></image>

											</view>
											<view class="stars-unchecked">
												<image class="star" v-for="item in 5 - item.goods_rank" :src="imgUrl+'common/star-gray.png'" role="img"></image>
											</view>
										</view>
										<view class="state-spec ellipsis-1"></view>
									</view>
									<view class="comment-mes">{{item.content}}</view>
									<view class="img-ul" v-if="item.commentsImg!='' ||item.commentsImg">
										<block v-for="(item1,pic) in item.commentsImg" :key="pic">
											<view class="img-li">
												<!-- <image mode='aspectFill' ></image> -->
													<image @tap="previewCommentImgs" class="wh100" :data-cidx="item.comment_id" :data-index="pic" role="img" :src="hostUrl+item1"></image>
											</view>
										</block>
									</view>
								</view>
							</view>
						</block>

					</view>
					<text class="nodata" v-if="noData">没有数据了~~</text>
				</view>
			</view>
		</view>
		<!-- 返回到顶部 -->
		<view @tap="doScrollTop" class="toTop">
			<image class="wh100" :src="imgUrl+'common/topup.png'" role="img"></image>
		</view>
		<!-- 底部footer -->
		<view class="join-cart">
			<view class="flex_bottom">
				<view class="custom-service cart-ico">
					<button class="cs-button" open-type="contact" session-from="wechat|3624|虹欧股|http://192.168.0.250:1002/public/upload/head_pic/20191104/817baee8337991fbd7ab060dfd29cbf3.jpg|63"
					 role="button" aria-disabled="false">
						<image class="cs-img cs-img-kf" :src="imgUrl+'common/custom-service.png'" role="img"></image>
						<view class="cs-ing-name">客服</view>
					</button>
					<!-- <view hidden class='cs-button' @tap='contactService'>
					    <image class="cs-img cs-img-kf" src="../../../images/custom-service.png"></image> 
					    <view class='cs-ing-name'>客服</view>
					</view> -->
					<!-- <view class='cs-button'>
					    <image class="cs-img cs-img-kf" src="../../../images/custom-service.png"></image> 
					    <view class='cs-ing-name'>客服</view>
					</view> -->
				</view>
				<view @tap="collectGoods" class="goods-collect">
					<view class="collect-img">
						<image class="wh100" v-if="collectActive" :src="imgUrl+'common/heart.png'" role="img"></image>
						<image class="wh100"v-if="!collectActive" :src="imgUrl+'common/heart-h.png'" role="img"></image>
					</view>
					<view class="collect-des">收藏</view>
				</view>
			
				<view class="shopping-cart cart-ico">
					<navigator url="../../cart/cart/cart" open-type="switchTab" role="navigation">
						<image class="sc-img" :src="imgUrl+'common/shopping-cart.png'" role="img"></image>
						<view class="cart-num " v-if="cartNum>0" :class="[cartNum?'ellipsis-1':'']"> {{cartNum}} </view>
						<view class="shopping_cart">购物车</view>
					</navigator>
				</view>

			</view>
			<!-- <view @tap="openSpecModel" class="join-btn cart-btn" data-index="true">加入购物车</view>
			<view @tap="openSpecModel" class="buy-btn cart-btn" data-index="false">立即购买</view> -->
			
			<!-- 购物车 -->
			<view v-if="goods_info.is_virtual" class="buy-btn cart-btn cart-btn-lg"  data-index="0" @tap="openSpecModel">立即购买</view>
			<view v-else-if="prom_type == 4 " class="buy-btn cart-btn cart-btn-lg" @tap="openSpecModel" data-index="0">立即预定</view> 
			<block v-else-if="goods_info.exchange_integral <= 0">
			    <view class="join-btn cart-btn" @tap="openSpecModel" data-index="1" >加入购物车</view>
			    <view class="buy-btn cart-btn" @tap="openSpecModel" data-index="0" >立即购买</view>
			</block>
			<view v-else="goods_info.exchange_integral > 0" class="buy-btn cart-btn cart-btn-lg" @tap="openSpecModel">立即兑换</view>
		</view>
		
		
		
		<!-- 选择规格弹窗 -->	
		<view v-show="SpecModal">
			<view @tap="closeSpecModal" class="cover-layer"></view>
			<view class="spec-model">
				<closeicon @click="closeSpecModal" class="modal-close" color="gray" size="22" type="close" role="img"></closeicon>
				<view class="spec-goods">
					<!-- <image class="wh100 spec-img" :src="specification.src" role="img"></image> -->
					<image class="wh100 spec-img" :src="goods_info.original_img.indexOf('public')==1?hostUrl+goods_info.original_img:goods_info.original_img" role="img"></image>
					<view class="spec-goods-info">
						<view class="spec-goods-name">{{goods_info.goods_name}}</view>
						<view class="spec-goods-price">
							<block v-if="!itemId">
								<text>
									￥
								</text>
								<!-- 148.00 -->
								<block v-if="minPrice!=maxPrice">
									{{minPrice}}-{{maxPrice}}
								</block>
								<!-- <block v-if="goods_info">
									{{filter(goods_info.shop_price)}}
								</block> -->
								<block v-if="minPrice==maxPrice">
										{{filter(goods_info.shop_price)}}
								</block>
							</block>
							<block v-if="itemId">
								<text>
									￥
								</text>
								<!-- 148.00 -->
								{{filter(goods_info.shop_price)}}
								
							</block>
							<block v-if="goods_info.exchange_integral>0">
								+{{goods_info.exchange_integral}}积分
							</block>
							<view class="spec-goods-stock">剩余库存:{{goods_info.store_count}}</view>
						</view>
					</view>
				</view>
				<block v-for="(item,n) in specification" :key="n">
					<view class="spec-name">{{item.name}}</view>
					<block v-for="(item,index) in item.spec_item_list" >
						
						<view @tap="selectSpec(item.id,n,$event,index)" class="spec-btn " :class="[subIndex[n]==index?'spec-btn-click':'']"  :data-id="item.id" :data-index="n" >{{item.item}}</view>
					</block>
					
				</block>
				
				<view class="spec-name number">
					数量
					<view class="count">
						<view @tap="subCartNum" class="sub">-</view>
						<input @blur="inputCartNum" v-model="goodsInputNum" type="number"  >
						</input>
						<view @tap="addCartNum" class="add">+</view>
					</view>
				</view>
				<view class="spec-cart-btns">
					<view @tap="addCart" v-if="addcart&&goods_info.exchange_integral==0"  class="spec-cart-btn spec-add-cart " :class="[goods_info.store_count<=0?'spec-cart-disable':'']" data-action="add">确定</view>
					<view @tap="addCart" v-else-if="addcart&&goods_info.exchange_integral>0" class="spec-cart-btn spec-add-cart " :class="[goods_info.store_count<=0?'spec-cart-disable':'']" data-action="buy">立即兑换</view>
					<view @tap="addCart" v-else-if="!addcart" class="spec-cart-btn spec-add-cart " :class="[goods_info.store_count<=0?'spec-cart-disable':'']" data-action="buy">确定</view>
					
					<!-- <view @tap="addCart" v-if="prom_type == 4 " class="spec-cart-btn spec-add-cart " >确定</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import closeicon from "@/components/uni-icons/uni-icons.vue";
	import {mapState} from "vuex";
	import {
		
		getGoodsInfo,
		getGoodsImg,
		getCoupons,
		getPromOrder,
		getStore,
		getStoreRecommend,
		getGoodsAttr,
		getComments,
		getCommentStatistics,
		getPrice,
		getSpecification,
		getSku,
		getUserAddress,
		getAddressOne,
		getGoodsFocus,
		postGoodsFocus,
		delGoodsFocus,
		addCart,
		getGoodsCartNum,
		getCartList,
		postVisit,
		getFreight,
	} from "@/api/api.js";
	import config from "@/api/config.js";
	import common from "@/common/common.js";
	export default {
		data() {
			return {
				imgUrl:config.imgUrl,
				loginInfo:uni.getStorageSync('loginInfo') || null,//登录信息
				hostUrl: config.host,
				type: 1, //优惠劵type 默认1
				activeCategoryId: 0, //商品主业
				activeNormsId: 0, // 0默认选中商品详情
				collectActive:true,//未收藏
				selectArr:[],//存放被选中的值
				 subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				itemId:"",//商品规格id //加入购物车需要传
				freight:"",//运费
				storeId: "", //店铺id
				cartNum:"",//购物车数量
				addcart:true,//加入购物车
				itemId:"",//sku中的item_id
				promOrder: "", //订单优惠信息
				goods_id: "", //商品id
				shipping: "", //是否包邮 1包邮
				goodsInputNum:1,//选中的商品数
				storeInfo: "", //店铺信息
				storeRecommend: "", //店铺推荐商品
				goods_content: "", //商品详情 富文本
				goods_info: "", //商品信息
				SpecModal: false, //规格弹窗
				coupon: "", //优惠劵
				cat_id3: "", //商品三级id
				price: [], //价格
				prom_type:"",//判断是否有活动
				allComments: [], //全部评论
				allTotal: "", //总评论数
				goodsAttr: [], //商品规格参数
				commentsType: 1, //评论type 默认1
				
				noData: false, //无数据
				defaultImg: this.imgUrl+"common/user68.jpg",//默认匿名图片
				commentData: "", //评论信息 好评率
				p: 1, //评论接口返回8条
				commentsImg: [], //评论数组的图片
				recommendRrice: [], //推荐商品价格
				exchange_integral: "", //0 不参与积分兑换
				pricePlan:"",//价格方案
				specification:"",//规格
				maxPrice:0,//最大价
				minPrice:0,//最小价
				addressList:"",//地址
				group:"",//商品团购信息
				countdown:"",//倒计时
				timer:null,//时间
				categories: [{
						name: "商品",
						id: 0
					},
					{
						name: "详情",
						id: 1
					},
					{
						name: "评论",
						id: 2
					}
				],
				categories3: [{
						name: "全部",
						id: 1,
						num: 0
					},
					{
						name: "好评",
						id: 2,
						num: 0
					},
					{
						name: "中评",
						id: 3,
						num: 0
					},
					{
						name: "差评",
						id: 4,
						num: 0
					},
					{
						name: "有图",
						id: 5,
						num: 0
					}
				],
				goods_img: [], //商品图
				select: { //选择的商品规格参数
					keyName:"",//规格名
					
				},
				options:""
			};
			 
		},
		components: {closeicon},
		computed:mapState(['hasLogin','imgType','goodsImgHeight','goodsImgWidth']),
		onLoad(options) {
			this.options=options;
			console.log(options)
			this.goods_id = options.goods_id;
			// this.good_id=1;
			if (!options.goods_id) { //goods_id为空则返回上一页
				uni.showModal({
					title: '提示',
					content: '缺少重要参数',
					success: function(res) {

						if (res.confirm) {
							uni.navigateBack({
								delta: 1
							});
						} else if (res.cancel) {
							uni.navigateBack({
								delta: 1
							});
						}
					}
				});
			}
			this._getGoodsInfo(options.goods_id)
			// this._getGoodsInfo(2911)
			// this._getGoodsInfo(2140)
		},
		onShow(){
			/*重新获取登录状态*/
			
			
		
			if(this.hasLogin){
				this.postVisit(this.goods_id)
				/*获取默认地址  默认地址为第一条*/
				this._getUserAddress()
				/*购物车商品数量*/ 
				this.getGoodsCartNum()
				/*查询收藏*/
				this._getGoodsFocus(this.goods_id)
				/*添加商品浏览记录*/
				
				 
			}
			/*选择地址*/
			let addressId=uni.getStorageSync("addressInfo");
			if(addressId){
				this._getAddressOne(addressId)
			}
		},
		
		methods: {
			_getGoodsInfo(id) { //商品信息
				getGoodsInfo(id).then(res => {
					/*只有请求商品基础信息成功之后才进行下一步操作*/
					if (res) {
						console.log(res, res.goods_content)
						this.goods_info = res;
						if(res.goods_content){
							this.goods_content = res.goods_content.replace(/<img/gi, "<img style='width:100%'");
						}
						this.exchange_integral = res.exchange_integral;
						this.storeId = res.store_id;
						this.goods_id = res.goods_id;
					
						let price =res.shop_price.toFixed(2)
						
						
						let priceArr = price.split(".");
						this.price = priceArr;
						this.cat_id3 = res.cat_id3;

						if (res.is_free_shipping > 0) { //判断是否包邮
							this.shipping = "包邮"
						} else {
							this.shipping = "该地区不支持配送"
						}
						/*初始化*/
						this._getGoodsImg(id);
						let Couponsparams={
							"cat_id":res.cat_id3,
							"type":this.type,
						}
						
						this._getCoupons(Couponsparams);
						this._getPromOrder(this.storeId);
						this._getStore(this.storeId);
						this._getStoreRecommend(this.cat_id3);
						this._getGoodsAttr(this.goods_id);
						// this._getGoodsAttr(68);
						this._getComments(this.goods_id, this.commentsType, this.p)
						
						console.log(this.goods_id)
						this._getCommentStatistics(this.goods_id)
						this._getPrice(this.goods_id);
						
						/*添加收藏*/
					
						// console.log(res.cat_id3)
					} else {

					}
				})
			},
			_getGoodsImg(id) { //商品图片list
				getGoodsImg(id).then(res => {
					console.log(res)
					if(res.length>0){
						res.map(item=>{
							if(item.image_url.indexOf('public')==1){
								item.image_url=this.hostUrl+item.image_url;
							}
						})
						this.goods_img = res;

					}
					
				})
			},
			_getCoupons(params) { //优惠劵信息 需要商品3级id
				getCoupons(params).then(res => {
					// console.log(res)
					if(res.status!=1){
						// common.model(res.msg)
						return 
					}
					this.coupon = res.records
				})
			},
			filter(e){
				let num=parseFloat(e).toFixed(2)
				return num
			},
			_getPromOrder(storeId) { //根据storeId来返回优惠信息
				getPromOrder(storeId).then(res => {
					console.log(res)
					this.promOrder = res
				})
			},
			_getStore(storeId) { //storeId 店铺信息
				getStore(storeId).then(res => {
					console.log(res)
					this.storeInfo = res;
				})
			},
			_getStoreRecommend(cat_id) { //推荐商品
				getStoreRecommend(cat_id).then(res => {
					console.log(res)
					this.storeRecommend = res.records;
					// let price=res.records.shop_price.toFixed(2);
					let recommendRrice = [];
					this.storeRecommend.forEach((i, index) => { //循环商品价格
						// console.log(i,index)
						let price=0;
						price = i.shop_price.toFixed(2);
						let priceArr = price.split(".");

						recommendRrice.push(priceArr)
						// this.recommendRrice=recommendRrice

					})
					this.recommendRrice = recommendRrice


				})
			},

			_getGoodsAttr(goods_id) { //商品参数
				getGoodsAttr(goods_id).then(res => {
					console.log(res)
					this.goodsAttr = res;
				})
			},
			
			_getComments(id, type, p) { //商品评论数
				getComments(id, type, p).then(res => {
					
					if(res){
						// console.log(res)
						let commentArr = []
						commentArr = res.records;
						// this.commentsList = commentArr;
						
						this.allTotal = res.total;
						let picArr = [];
						/*遍历之前 先检查一遍  commentArr是否存在，不然会报 forEach undefined*/
						if(!commentArr){
							return;
						}
						commentArr.forEach((i, index) => {
							console.log(i.img.split(","))
							picArr=i.img.split(",")
							
							i.commentsImg=picArr
						})
						this.allComments = this.allComments.concat(commentArr);
						
						
						// console.log(this.allComments)
					}
					
				
				})
			},
			onReachBottom() { //滚动加载
				if (this.activeCategoryId == 2) {
					if (this.allComments.length == this.allTotal) { //length=total显示文本信息
						// uni.showToast({
						//     title: '加载完了',
						//     duration: 2000
						// });
						
						this.nodata = true
						return false;
					}
					this.p++; //上拉加载每次加载10条
					this._getComments(this.goods_id, this.commentsType, this.p)
				}


			},
			_getCommentStatistics(id) { //商品评论人数 百分比
				getCommentStatistics(id).then(res => {
					console.log(res)
					this.commentData = res;
					this.categories3[0].num = res.total_sum;
					this.categories3[1].num = res.high_sum;
					this.categories3[2].num = res.center_sum;
					this.categories3[3].num = res.low_sum;
					this.categories3[4].num = res.img_sum;

				})
			},
			_getPrice(id){//获取规格价格 先要获取价格才能获取规格
				getPrice(id).then(res=>{
					if(res.length>0){
						console.log(res);
						this.pricePlan=res;
						this._getSpecification(this.goods_id);
						
						
						/*获取价格区间*/
						let price=[]
						res.forEach((item,i)=>{
							// console.log(item.price)
							price.push(item.price)
						})
						// console.log(price)
						var max=price[0];//最大值
						var min=price[0];//最小值
						price.forEach((i,ind)=>{
							if(i>max){
								max=i;
							}
							if(i<min){
								min=i;
							}
						})
						// console.log(max,min)
						this.maxPrice=max;
						this.minPrice=min;
						return max,min;
						
						
						
					}else{
						var params={
							id:this.goods_id,
							isTeam:false,
							itemId:""
						}
						this.getSku(params)
					}
				})
			},
			_getSpecification(id){//获取规格先要判断 getPrice是否返回数据 
				getSpecification(id).then(res=>{
					console.log(res)
					this.specification=res;
				})
			},
			getSku(params){//获取规格参数
				getSku(params).then(res=>{
					console.log(res)
					/*规格有可能是0*/
					if(res){
					
						
						
						this.goods_info=res;
						this.itemId=res.item_id;
						var price = res.shop_price;
							price=price.toFixed(2)
						let priceArr = price.split(".");
						this.price = priceArr;
						if(res.prom_type==2){ //团购活动
							this.timer=setInterval(() => {
								let timestamp=new Date().getTime() /*当前时间*/
								let differenceTime =res.prom_end_time * 1000 - timestamp  
								this.countdown=common.remainTime(differenceTime)	
								
							}, 1000);
							console.log()
						}
						this.prom_type=res.prom_type
					}
					
				})
			},

			/*获取用户地址*/
			_getUserAddress(){
				getUserAddress().then(res=>{
					console.log(res)
				
					this.addressList=res[0]
					
				})
			},
			/*选择单个地址*/ 
			_getAddressOne(addressId){
				getAddressOne(addressId).then(res=>{
					console.log(res)
					
					this.addressList=res;
					let params={
						goods_id:this.goods_id,
						goods_num:this.goodsInputNum,
						region_id:this.addressList.district
					}
					this.getFreight(params)
					console.log(this.addressList)
				})
			},
			/*获取商品运费*/ 
			getFreight(params){
				getFreight(params).then(res=>{
					if(res=="0"){
						this.shipping="包邮"
					}
					if(res!="0"){
						this.shipping=`${res}元`
					}
					if(res.msg&&res.msg=="商品不配送该地区"){
						this.shipping="该地区不支持配送"
						return 
					}
				})
			},
			getCardList() { //跳转到领劵中心
				uni.navigateTo({
					url: `/pages/active/coupon_list/coupon_list?cart_id=${this.cat_id3}`
				})
			},
			inputCartNum(){
				/*输入数>库存数 =库存数*/
				if(this.goodsInputNum>this.goods_info.store_count){
					this.goodsInputNum=this.goods_info.store_count
				}
				if(this.inputCartNum<=0){
					this.inputCartNum=1
				}
			},
			openSpecModel(e) { //打开规格弹窗
			console.log(e)
			let index=e.currentTarget.dataset.index
			if(index==1){
				this.addcart=true;
			}else if(index==0){
				this.addcart=false;
			}
			
			this.SpecModal = true;
				
			},
			closeSpecModal() { //关闭规格弹窗
			console.log(111)
				this.SpecModal = false;
				
			},
			selectSpec(item,n,event,index){//选择规格
				var self=this;
				console.log(item)
				if (self.selectArr[n] != item) {
					self.selectArr[n] = item;
					self.subIndex[n] = index;
				} else {
					self.selectArr[n] = "";
					self.subIndex[n] = -1;
				}
				self.checkItem()
				
				// console.log(self.selectArr.length)
				var result1="";
				if(self.selectArr.length>1){
					var resultArr=[]
					this.selectArr.forEach((i,ind)=>{
						resultArr.push(JSON.stringify(i))
						resultArr=resultArr.reverse()
					})
					result1=resultArr.join("_")
				}else{
					// var result2=JSON.stringify(item)
					var resultArr=[]
					this.selectArr.forEach((i,ind)=>{
						resultArr.push(JSON.stringify(i))
					})
					result1=resultArr;
				}
				this.pricePlan.forEach((i,ind)=>{
						// console.log(i.key)
					if(i.key!=result1){//不相等 有可能是倒序了  
						var resultArr=[];
						resultArr=result1.toString().split("_");
						result1=resultArr.reverse();
						result1=result1.join("_")
					}	
					if(i.key==result1){
						
						console.log(result1)
						this.itemId=i.item_id;
						this.select.keyName=i.key_name;
						console.log("等于",ind)
						var params={
							id:this.goods_id,
							isTeam:false,
							itemId:this.itemId
						}
						this.getSku(params)
					}
				})
			},
			checkItem: function() {
				var self = this;
				var option = self.specification;
				var result = []; //定义数组存储被选中的值
				for (var i in option) {
					result[i] = self.selectArr[i] ? self.selectArr[i] : '';
				}
				for (var i in option) {
					var last = result[i]; //把选中的值存放到字符串last去
					for (var k in option[i].list) {
						result[i] = option[i].list[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
						
					}
					
					result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
				}

				self.$forceUpdate(); //重绘
			},
			/*回到顶部*/
			doScrollTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			tabClick(e) { //导航切换
				console.log(e.currentTarget.dataset.id)
				this.activeCategoryId = e.currentTarget.dataset.id
			},
			tabClick2(e) { // 导航栏切换
				this.activeNormsId = e.currentTarget.dataset.id
			},
			tabClick3(e) { //评论切换
				this.p=1;
				this.allComments.length=0;
				this.commentsType = e.currentTarget.dataset.id;
				this._getComments(this.goods_id, this.commentsType, this.p)
			},
			tabComment() { //打开好评列表
				this.activeCategoryId = 2;
				//打开好评列表时，窗口回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			addCart(e){//加入购物车
			// console.log(e)
			
			//判断是否登录
			if(this.hasLogin){
				let action=e.currentTarget.dataset.action
				console.log(action)
					/*关闭弹窗*/ 
					this.SpecModal = false;
					/*加入购物车操作，且不是预售商品*/
					if(action=="add" &&this.prom_type!=4){ 
						// console.log("加入购物车");
						let params={
							"item_id":this.itemId||0,
							"goods_id":this.goods_id, //商品id
							"goods_num":this.goodsInputNum//商品数量
						}
						this._addCart(params)
					}else if(action=="buy" &&this.prom_type!=4){
						/*&&this.goods_info.is_virtual!=1  虚拟商品暂时注释
						*/ 
						// console.log("购买")
						let params={
							"goods_id":this.goods_id,
							"goods_num":this.goodsInputNum,//商品数量
							"item_id":this.itemId||0
						}
						this._getCartList(params)

					}/*else if(action=='buy'&&this.goods_info.is_virtual==1){ //虚拟商品
							//虚拟商品暂时注释
							console.log("虚拟上商品");
							common.toast("none","虚拟商品购买还未完善!",3000)
					}*/
					if(this.prom_type==4){
						uni.navigateTo({
							url:`/pages/cart/cart2/cart2?goods_id=${this.goods_id}`
							 // `/pages/active/coupon_list/coupon_list?cart_id=${this.cat_id3}`
						})
					}
					if(this.goods_info.store_count<0){
						common.toast("none","库存已空!",2000)
					}
			}else{
				common.toast("none","请重新登录",2000)
				
				setTimeout(function() {
					common.islogin()
				}, 2000);
				// common.islogin()
			}
			
				
			},
			/*获取购物车订单 && 立即购买*/
			_getCartList(params){
				getCartList(params).then(res=>{
					console.log(res)
					if(res){
						this.SpecModal = false;
						uni.navigateTo({
							url:`/pages/cart/cart2/cart2?goods_id=${this.goods_id}&goods_num=${this.goodsInputNum}&item_id=${this.itemId}`
						})
					}
				})
			},
			/*添加商品浏览记录*/
			postVisit(params){
				postVisit(params).then(res=>{
					console.log(res)
				})
			},
			/*加入购物车*/
			_addCart(params){
				addCart(params).then(res=>{
					console.log(res)
					if(res.status!=1){
						// common.model(res.msg);
						return 
						
					}
					
					common.toast("none","加入购物车成功",2000)
					
					// this.getGoodsCartNum()
					
						 
						
						
						
					
				}).then(()=>{
					this.getGoodsCartNum()
				})
			},
			/*购物车商品总数*/
			getGoodsCartNum(){
				getGoodsCartNum().then(res=>{
					console.log(res)
					this.cartNum=res
				})
			},
			addCartNum(){//数量
				if(this.goodsInputNum<this.goods_info.store_count){ //小于库存
					this.goodsInputNum++
				}
				
			},
			subCartNum(){ //减
				if(this.goodsInputNum>1){
					this.goodsInputNum--;
				}
			},
			/*查询商品是否收藏*/ 
			_getGoodsFocus(goodsId){
				getGoodsFocus(goodsId).then(res=>{
					// console.log(res)
					if(res){
						this.collectActive=false;
					}
				})
			},
			/*收藏*/ 
			collectGoods(){
				if(this.hasLogin){
					let goods_id=this.goods_id;
					if(this.collectActive==false){
						
						this._delGoodsFocus(goods_id)
					}else{
						
							
						this._postGoodsFocus(goods_id)
					}
				}else{
					
					common.toast("none","请重新登录",2000)
					
					setTimeout(function() {
						common.islogin()
					}, 2000);
				}
					
				
			},
			/*商品取消收藏*/
			_delGoodsFocus(goodsId){
				delGoodsFocus(goodsId).then(res=>{
					console.log(res)
					if(res.status==1){
						this.collectActive=true
					}
				})
			},
			/*商品收藏*/
			_postGoodsFocus(goodsId){
				postGoodsFocus(goodsId).then(res=>{
					console.log(res)
					if(res.status==1){
						this.collectActive=false
					}
				})
			},
			/*预览图片*/
			previewCommentImgs(e){
				console.log(e)
				var cid=e.currentTarget.dataset.cidx;
				var index=e.currentTarget.dataset.index;
				var pic;
				this.allComments.forEach((i,index)=>{
					if(i.comment_id==cid){
						pic=i
					}
				})
				let arr=[]
				pic.commentsImg.forEach((i,index)=>{
					arr.push(this.hostUrl+i)
				})
				// console.log(arr)
				uni.previewImage({
				      current: arr[index], /*是一个数组格式*/
				      urls: arr
				    });
				
			},
			enterAddress() { //选择地址
				
				if(this.loginInfo){
					uni.navigateTo({
						url: '/pages/user/address_list/address_list?operate=selectAdress'
					})
				}else{
					common.islogin(this.loginInfo)
				}
			},

		},
		destroyed() {
			clearInterval(this.timer)
		},

	}
	
</script>

<style lang="scss">
	
	page {
		background: $page-bg-color;
	}

	.nodata {
		display: flex;
		justify-content: center;
	}

	.container {
		font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding-bottom: 134rpx;
		margin-bottom: 20rpx;
		overflow-x: hidden;
	}

	.wh100 {
		width: 100%;
		height: 100%;
	}

	/*商品头部start*/
	.type-navbar {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 80rpx;
		background-color: $index-bg-color;

	}

	.type-box {
		width: 25%;
		box-sizing: border-box;
		font-size: 28rpx;
		line-height: 76rpx;
		padding: 0 20rpx;
		text-align: center;
		display: inline-block;
		overflow: hidden;
	}

	.type-navbar-item {
		border-bottom: 4rpx solid $border-color;
	}

	.type-item-on {
		color: $text-color-master;
		border-bottom: 4rpx solid $border-color-master;
	}

	/*商品头部end*/
	/*商品信息start*/
	.swiper_box {
		width: 100%;
		height: 750rpx;

		.wh100 {
			width: 100%;
			height: 100%;
		}
	}

	.pd-bg-fff {
		padding: 0 30rpx 0rpx;
		background-color: $index-bg-color;
		font-size: 32rpx;


	}

	.goods-title {
		display: flex;
		justify-content: space-between;
		height: 108rpx;
		position: relative;
		padding: 0 20rpx;

	}

	.ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;

	}

	.goods-name {
		width: 704rpx;
		height: 82rpx;
		margin: 20rpx 0;
		line-height: 40rpx;
		font-size: 30rpx;
		color: #1d1d1d;
		font-weight: 600;

	}

	.share-btn {
		display: inline-block;
		margin-top: 12rpx;
		margin-left: 12rpx;
		height: 44rpx;
		width: 48rpx;
		color: $text-color-minor;
		font-size: 20rpx;
		position: absolute;
		right: 22rpx;
		top: 84rpx;

		image {
			width: 44rpx;
			height: 44rpx;

		}
	}

	.goods-price {
		font-size: 30rpx;
		padding: 20rpx 20rpx;
		line-height: 40rpx;
		color: $text-color-hint;
		border-bottom: 1px solid $cut-bg-color;

	}

	.co-red {
		color: $text-color-master;
	}

	.price.co-red {
		font-size: 56rpx;
		font-weight: 600;

	}

	.price.co-red>text {
		font-size: 36rpx;
		padding-bottom: 16rpx;
		display: inline-block;
	}

	.price .mon {
		font-size: 30rpx;

	}

	.market-price {
		display: flex;
		font-size: 22rpx;
		color: $text-color-hint;
		position: relative;
		margin-top: 10rpx;
	}

	.market-price .line {
		text-decoration: line-through;
	}

	.goods-num {
		display: flex;
		position: absolute;
		right: 0;
		width: 370rpx;
	}

	.goods-num .stock {
		position: absolute;
		right: 0;
	}

	.coupons {
		margin-top: 16rpx;
		border-bottom: 2rpx solid #f3f3f3;
	}

	.logistics-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		font-size: 26rpx;
		color: $text-color-minor;

	}

	.item-title {
		width: 120rpx;

	}

	.promotion-item-mes-card {
		width: 500rpx;
		overflow: hidden;
		white-space: nowrap;
		height: 70rpx;
		line-height: 70rpx;
		margin-right: 66rpx;

	}

	.promotion-item-mes-cardborder {
		border: 1rpx solid $border-color-master;
		color: $text-color-master;
		border-radius: 10rpx;
		font-size: 20rpx;
		height: 28rpx;
		padding: 4rpx 8rpx;

	}

	.item-img {
		width: 28rpx;
		height: 28rpx;
		margin-top: 4rpx;

	}

	.specifications {
		margin-top: 16rpx;

	}

	.logistics-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		font-size: 26rpx;
		color: $text-color-minor;

	}

	.logistics-item .item-mes {
		width: 570rpx;
		height: 70rpx;
		line-height: 74rpx;

		color: #1f1f1f;
		font-size: 26rpx;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.logistics-item .fw600 {
		font-weight: 600;
	}

	.item-mes .loc {
		width: 22rpx;
		height: 26rpx;
		margin-top: 22rpx;
	}

	.user-comment {
		margin: 16rpx 0 0 0;
		font-size: 28rpx;
	}

	.evaluation {
		font-size: 30rpx;
		color: $text-color;
		font-weight: 600;
	}

	.evaluation text {
		font-size: 22rpx;
		color: $text-color-hint;
		font-weight: 500;
		margin-left: 16rpx;
	}

	.good-comment,
	.comment-num {
		display: flex;
	}

	.good-comment {
		line-height: 22rpx;
		color: $text-color-hint;
		font-size: 22rpx;
	}

	.good-comment .co-red {
		padding-left: 10rpx;
	}

	.good-comment .item-img {
		width: 22rpx;
		height: 22rpx;
		padding-left: 8rpx;
		margin-top: 0;
	}

	.shops-mes {
		position: relative;
		margin: 16rpx 0 0 0;
		padding: 20rpx 22rpx 0 20rpx;
		background-color: $index-bg-color;

	}

	.shops-info {
		display: flex;
		height: 100rpx;
	}

	image {
		vertical-align: top;

	}

	.shops-pic {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
		border: 1px solid $cut-bg-color;
	}

	.shops-name {
		height: 100rpx;
		width: 420rpx;
		line-height: 50rpx;
		font-size: 30rpx;
	}

	.shops-name .ellipsis-1 {
		color: #1d1d1d;
		font-size: 28rpx;
	}

	.store-desc {
		font-size: 22rpx !important;
		color: $text-color-hint !important;
	}

	.shops-name .ellipsis-1 {
		color: #1d1d1d;
		font-size: 28rpx;
	}

	.store-desc text:nth-child(1) {
		margin-right: 24rpx;
	}

	.baguette {
		width: 124rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		background-image: linear-gradient(90deg,
			#ff7019 0%,
			#ff3b3b 100%),
			linear-gradient(#ffc019,
			#ffc019);
		background-blend-mode: normal,
			normal;
		border-radius: 24px;
		font-size: 20rpx;
		color: $text-color-white;
		position: absolute;
		right: 22rpx;
		top: 58rpx;
	}

	.scores-list {
		display: flex;
		height: 40rpx;
		line-height: 40rpx;
		padding: 30rpx 0;
		justify-content: space-between;
		border-bottom: 2rpx solid #f3f3f3;
	}

	.hd_item {
		display: flex;
		font-size: 26rpx;
		color: #666;
	}

	.activity .event {
		width: 580rpx;
	}

	.activity {
		padding-top: 20rpx;
	}

	.activity .man {
		font-size: 22rpx;
		color: #666;
	}

	rich-text image,
	rich-text img {

		width: 100%;
	}

	.activity .man .text {
		background-color: #ff3b3b;
		border-radius: 4rpx;
		color: #fff;
		padding: 5rpx 8rpx;
		display: inline-block;
		margin-right: 20rpx;
		margin-bottom: 30rpx;
	}

	.activity .man .item_content {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 450rpx;
		display: inline-block;
		height: 24rpx;
		line-height: 28rpx;
	}

	.scores-item {
		font-size: 22rpx;
		color: #999;
		text-align: center;
		line-height: 40rpx;
		justify-content: space-between;
	}

	.scores-item .co-red {
		display: inline-block;
		padding-left: 6rpx;
	}

	.scores-item .co-red text {
		width: 30rpx;
		height: 30rpx;
		line-height: 32rpx;
		background: #ececec;
		font-size: 18rpx;
		color: #ff3c3c;
		display: inline-block;
		border-radius: 50%;
	}

	.scores-item .co-red .middle {
		color: #ff8b03;
	}

	.scores-item .co-red .low {
		color: $text-color-hint;
	}

	.scores-btns {
		height: 64rpx;
	}

	.scores-btns-item {
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 330rpx;
		height: 60rpx;
		border: 1px solid $cut-bg-color;
		font-size: 28rpx;
		color: $text-color-minor;
	}

	.scores-btns-item:first-child {
		margin-right: 20rpx;
	}

	.scores-btns-pic {
		width: 40rpx;
		height: 37rpx;
		margin: 0 10rpx;
	}

	.recommend {
		background-color: $index-bg-color;
		border-bottom: 1px solid $cut-bg-color;
		padding-bottom: 20rpx;
	}

	.recommend-title {
		height: 80rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		padding: 0 22rpx;
		color: $text-color;
		font-weight: 600;
	}

	.recommend-ul .li {
		width: 236rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: $text-color;
		display: inline-block;
		margin-left: 10rpx;
		border: 2rpx solid $cut-bg-color;
		margin-bottom: 10rpx;
	}

	.recommend-ul .li .color {
		color: $text-color-master;
		font-size: 26rpx;
		padding-left: 10rpx;
		font-weight: 600;
		height: 40rpx;
		line-height: 40rpx;
	}

	.estimate .star_on image {
		width: 18rpx;
		height: 18rpx;
		margin-right: 8rpx;
		margin-top: 8rpx;
	}

	.estimate {
		padding: 10rpx 20rpx 20rpx 20rpx;
		background: #fff;
		position: relative;
	}

	.estimate .user_img {
		width: 76rpx;
		height: 76rpx;
		position: absolute;
		border-radius: 50%;
	}

	.estimate .user {
		padding-left: 110rpx;
	}

	.estimate .star_on text {
		color: #333;
		font-size: 26rpx;
	}

	.estimate .star_on text:nth-child(1) {
		margin-right: 22rpx;
		max-width: 220rpx;
		display: inline-block;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.estimate .star_on .time {
		font-size: 24rpx;
		color: #999;
		float: right;
		margin-top: 10rpx;
	}

	.estimate_img image {
		width: 110rpx;
		height: 110rpx;
		margin-right: 16rpx;
	}

	.estimate_content {
		font-size: 24rpx;
		color: #333;
		line-height: 36rpx;
		display: inline-block;
		margin-top: 10rpx;
	}

	.estimate .user {
		border-bottom: 2rpx solid #f3f3f3;
		padding-bottom: 27rpx;
	}

	.estimate .estimate_img {
		margin-top: 20rpx;
	}

	.recommend-ul .li text {
		font-size: 20rpx;
		margin-right: 2rpx;
	}

	.li-img {
		width: 236rpx;
		height: 236rpx;
		margin: 0 auto;
	}

	.li-img .wh100 {
		width: 232rpx;
	}

	.li-title {
		color: $text-color;
		line-height: 30rpx;
		margin: 10rpx 10rpx;
		-webkit-line-clamp: 1;
		font-size: 22rpx;
	}

	.goods-norms {
		background-color: #fff;
	}

	.type-navbar2 {
		display: flex;
		height: 72rpx;
		border-bottom: 1px solid #f3f3f3;
	}

	.type-box2 {
		width: 50%;
		font-size: 26rpx;
		line-height: 72rpx;
		text-align: center;
		overflow: hidden;
	}

	.type-item2-on {
		color: $text-color-master;
	}

	.parameter {
		padding: 40rpx 0;
	}

	.table {
		width: 698rpx;
		margin: 0 auto;
		border: 1px solid $cut-bg-color;
		border-bottom: none;
	}

	.tb {
		width: 100%;
		min-height: 69rpx;
		line-height: 69rpx;
		border-bottom: 1px solid $cut-bg-color;
		font-size: 28rpx;
		text-align: center;
		color: #333;
	}

	.prom-info>.prom-type {
		color: white;
		background-color: #ff3b3b;
		margin-right: 14rpx;
		padding: 2rpx 8rpx;
		border-radius: 4rpx;
	}

	.th-thitle {
		font-weight: bold;
		background-color: #f5fafe;
	}

	.td-cont {
		display: flex;
	}

	.td-title {
		width: 259rpx;
		background-color: #f5fafe;
		border-right: 1px solid $cut-bg-color;
	}

	.td-text {
		width: 439rpx;
	}

	.type-item2-on {
		color: $text-color-master;
	}

	.toTop {
		position: fixed;
		z-index: 3;
		right: 20rpx;
		bottom: 160rpx;
		width: 68rpx;
		height: 68rpx;
		border: 1px solid $cut-bg-color;
		border-radius: 50%;
		overflow: hidden;
		cursor: pointer;
	}

	.join-cart {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		text-align: center;
	}

	.cart-ico {
		font-size: 24rpx;
		color: #333;
	}

	.shopping-cart {
		position: relative;
	}

	.cs-img {
		width: 48rpx;
		height: 48rpx;
		margin-top: 16rpx;
	}

	.cs-button {
		font-size: 22rpx;
		border: 1rpx solid #fff;
		line-height: 45rpx;
		color: #666;
	}

	.cs-button::after {
		border: none;
	}

	.sc-img {
		width: 48rpx;
		height: 48rpx;
		margin-top: 14rpx;
		font-size: 22rpx;
		color: #666;
	}

	.cs-img-kf {
		margin-top: 8rpx
	}

	.cart-num {
		position: absolute;
		left: 50%;
		top: 4rpx;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 50%;
		color: #fff;
		background-color: rgba(217, 81, 99, 0.9);
	}

	.shopping_cart {
		font-size: 22rpx;
		color: #666;
	}

	.cart-btn {
		font-size: 28rpx;
		color: #fff;
		line-height: 100rpx;
	}

	.join-btn {
		background-color: #ffb03f;
		width: 210rpx;
	}

	.buy-btn {
		background-color: #ff3b3b;
		width: 210rpx;
	}

	view.cart-btn-lg {
		width: 420rpx;
	}

	.goods-collect {
		width: 112rpx;
		padding-top: 12rpx;
	}

	.collect-img {
		width: 48rpx;
		height: 48rpx;
		margin: 0 auto;
		overflow: hidden;
	}

	.collect-des {
		text-align: center;
		font-size: 22rpx;
		color: #666;
	}

	.flex_bottom {
		display: flex;
		justify-content: space-around;
		width: 270rpx;
		padding: 0 30rpx;
	}

	/* 规格弹框 */
	.spec-model {
		position: fixed;
		bottom: 0;
		z-index: 20;
		background: white;
		width: 100%;
		padding: 0 30rpx;
		font-size: 32rpx;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	.spec-goods {
		padding: 15rpx 0 20rpx;
		float: left;
		width: 100%;
		border-bottom: 1px solid #f3f3f3;
	}

	.spec-img {
		float: left;
		height: 180rpx;
		width: 180rpx;
		margin-top: 6rpx;
	}

	.spec-goods-info {
		float: left;
		padding: 0 20rpx;
		width: 442rpx;
	}

	.spec-goods-name {
		color: #333333;
		font-size: 28rpx;
		line-height: 36rpx;
		height: 75rpx;
		margin: 10rpx 0 45rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.spec-goods-price {
		color: #ff3b3b;
		font-size: 24rpx;
		font-weight: bold;
		line-height: 50rpx;
		position: relative;
	}

	.spec-goods-price text {
		font-size: 22rpx;
	}

	.spec-goods-stock {
		font-size: 24rpx;
		color: #999999;
		display: inline-block;
		font-weight: 500;
		margin-left: 40rpx;
		position: absolute;
		top: 0rpx;
	}

	.spec-name {
		clear: both;
		padding: 20rpx 0;
		font-size: 30rpx;
	}

	.spec-name.number {
		padding-top: 40rpx;
	}

	.count {
		float: right;
		width: 184rpx;
		height: 50rpx;
		font-size: 28rpx;
		font-weight: 600;
	}

	.count>view,
	.count>input {
		float: left;
		width: 60rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.spec-btn {
		color: black;
		background-color: white;
		padding: 6rpx 14rpx;
		font-size: 22rpx;
		line-height: 28rpx;
		float: left;
		border: 1rpx solid #f3f3f3;
		margin: 4rpx 12rpx 10rpx 0;
		border-radius: 50rpx;
	}

	.spec-btn-click {
		color: white;
		background-color: #ff3b3b;
		border: 1rpx solid #ff3b3b;
	}

	.spec-cart-btns {
		margin: 20rpx -30rpx 0;
		padding: 20rpx 34rpx;
		float: left;
		width: 100%;
		line-height: 80rpx;
	}

	.spec-cart-btn {
		float: left;
		width: 690rpx;
		font-size: 30rpx;
		text-align: center;
		color: white;
		border-radius: 50rpx;
		background-color: #ff3b3b;
	}

	.spec-cart-disable {
		background: #bbbbbb;
	}

	.spec-cart-btn-lg {
		width: 690rpx;
	}

	/* 评论 */
	.goods-comment {
		background-color: #fff;
	}

	.type-navbar3 {
		display: flex;
		height: 88rpx;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #f3f3f3;
	}

	.type-box3 {
		background: #fff;
		font-size: 24rpx;
		line-height: 44rpx;
		height: 44rpx;
		overflow: hidden;
		border-radius: 6rpx;
		border: 1px solid #ff3b3b;
		color: #333;
		margin: 20rpx 10rpx;
	}

	.type-box3 view {
		padding: 0 10rpx;
	}

	.type-item3-on {
		background: #ff3b3b;
		color: #fff;
	}

	.comment-item {
		background-color: #fff;
		font-size: 28rpx;
	}

	.comment-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 102rpx;
		margin: 0 30rpx;
		color: #333;
		border-bottom: 1px solid #f3f3f3;
	}

	.user-name {
		display: flex;
		align-items: center;
	}

	.user-pic {
		width: 54rpx;
		height: 54rpx;
		margin-right: 10rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.stars {
		float: left;
		display: flex;
		height: 42rpx;
		line-height: 42rpx;
		margin: 15rpx 0;
		width: 200rpx;
	}

	.star {
		width: 30rpx;
		height: 28rpx;
	}

	.state-spec {
		margin: 15rpx 0;
		float: right;
		font-size: 24rpx;
		color: #666;
		width: 460rpx;
		text-align: right;
	}

	.comment-cont {
		padding: 0 30rpx 30rpx;
		border-bottom: 1px solid #f3f3f3;
	}

	.comment-cont view {
		overflow: hidden;
	}

	.comment-mes {
		line-height: 42rpx;
	}

	.img-ul {
		display: flex;
		flex-wrap: wrap;
	}

	.img-li {
		width: 120rpx;
		height: 120rpx;
		margin: 8rpx;
	}

	.comment-btn {
		height: 60rpx;
		padding: 20rpx 30rpx;
	}

	.comment-btn .btn {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60rpx;
		width: 45%;
		border: 1px solid #f3f3f3;
	}

	.comment-btn .btn-img {
		width: 30rpx;
		height: 28rpx;
		margin: 0 10rpx;
	}
</style>
